<template>
  <div class="app">

    <News>

      <!-- 如果News那边是默认插槽，有这么几种写法（写法比较多，推荐大家记住第三种写法）： -->
      <!-- <template scope="{newsList}"> -->
      <!-- <template slot-scope="{newsList}"> -->
      <!-- <template v-slot="{newsList}"> -->
      <!-- <template #default="{newsList}"> -->

      <!-- 如果News那边是具名插槽（插槽名叫demo），有这么几种写法（写法比较多，推荐大家记住第三种写法）： -->
      <!-- <template scope="{newsList}" slot="demo"> -->
      <!-- <template slot-scope="{newsList}" slot="demo"> -->
      <!-- <template v-slot:demo="{newsList}"> -->
      <template #demo="{newsList}">
         <ul>
          <li v-for="n in newsList" :key="n.id">{{n.title}}</li>
         </ul>
      </template>
    </News>

    <News>
      <template scope="obj" slot="demo">
         <ol>
          <li v-for="n in obj.newsList" :key="n.id">{{n.title}}</li>
        </ol>
      </template>
    </News>

    <News>
      <template scope="obj" slot="demo">
        <h4 v-for="n in obj.newsList" :key="n.id">{{n.title}}</h4>
      </template>
    </News>

  </div>
</template>

<script>
  import News from './components/News'

  export default {
    name:'App',
    components:{News},
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
    display: flex;
    justify-content: space-around;
  }
</style>